<template>
  <div>
    <div class="mt20 ml20">
      <el-input v-model="videoLink" placeholder="请输入视频链接" style="width: 300px;" />
      <input ref="refid" type="file" style="display:none" @change="zh_uploadFile_change">
      <el-button type="primary" icon="ios-cloud-upload-outline" class="ml10" @click="zh_uploadFile">{{ videoLink ? '确认添加' : '上传视频' }}</el-button>
      <el-progress v-if="upload.videoIng" :percentage="progress" :text-inside="true" />
      <div v-if="formValidate.video_link" class="iview-video-style">
        <video style="width:100%;height: 100%!important;border-radius: 10px;" :src="formValidate.video_link" controls="controls">
          您的浏览器不支持 video 标签。
        </video>
        <div class="mark" />
        <i class="iconv el-icon-delete" @click="delVideo" />
      </div>
    </div>
    <div class="mt50 ml20">
      <el-button type="primary" @click="uploads">确认</el-button>
    </div>
  </div>
</template>

<script>

import { productGetTempKeysApi } from '@/api/product'
import '../../../public/UEditor/dialogs/internal'
import axios from 'axios';
import SettingMer from '@/libs/settingMer'
import store from '@/store'
export default {
  name: 'Vide11o',
  data() {
    return {
      upload: {
        videoIng: false // 是否显示进度条；
      },
      progress: 0, // 进度条默认0
      videoLink: '',
      formValidate: {
        video_link: ''
      }
    }
  },
  methods: {
    // 删除视频；
    delVideo() {
      const that = this
      that.$set(that.formValidate, 'video_link', '')
    },
    zh_uploadFile() {
      if (this.videoLink) {
        this.formValidate.video_link = this.videoLink
      } else {
        this.$refs.refid.click()
      }
    },
    zh_uploadFile_change(evfile) {
      const that = this
      this.progress=10
      const suffix = evfile.target.files[0].name.substr(evfile.target.files[0].name.indexOf('.'))
      if (suffix !== '.mp4') {
        return that.$message.error('只能上传MP4文件')
      }
      that.$videoCloud.videoUpload({
        type: 'OSS',
        evfile: evfile,
        uploading(status, progress) {
          that.upload.videoIng = status
          console.log(status, progress)
        }
      }).then(res => {
        that.formValidate.video_link = res.data.src
       this.progress=100
        that.upload.videoIng = false
        that.$message.success('视频上传成功')
      }).catch(res => {
        that.$message.error(res)
      })
      // productGetTempKeysApi().then(res => {
      //   that.$videoCloud.videoUpload({
      //     type: res.data.type,
      //     evfile: evfile,
      //     res: res,
      //     uploading(status, progress) {
      //       that.upload.videoIng = status
      //       console.log(status, progress)
      //     }
      //   }).then(res => {
      //     that.formValidate.video_link = res.url
      //     that.$Message.success('视频上传成功')
      //   }).catch(res => {
      //     that.$Message.error(res)
      //   })
      // })
    },
    async uploadVideo(event) {
      const file = event.target.files[0];
      const that = this
      this.progress=0
      const suffix = event.target.files[0].name.substr(event.target.files[0].name.indexOf('.'))
      if (suffix !== '.mp4') {
        return that.$message.error('只能上传MP4文件')
      }
      const chunkSize = 1024 * 1024; // 每个切片的大小，这里以1MB为例
      const totalChunks = Math.ceil(file.size / chunkSize);
      axios.defaults.headers.common['X-Token'] = store.getters.token;
      axios.defaults.headers.post['Content-Type'] = 'multipart/form-data';
      // 创建进度对象

      // 创建上传任务的函数
      const uploadChunk = async (chunkIndex, chunk) => {
        const formData = new FormData();
        formData.append('file', chunk);
        formData.append('chunkIndex', chunkIndex);
        // 假设你的上传接口是 /upload，需要根据实际情况调整
        // 发送请求
        await axios.post('https://www.zzbitao.com//sys/upload/video', formData, {
          onUploadProgress: (e) => {
            // 这里可以更新进度信息
            that.progress++;
          },
        });
      };

      // 切割并上传视频
      for (let i = 0; i < totalChunks; i++) {
        const chunk = file.slice(chunkSize * i, i === totalChunks - 1 ? file.size : chunkSize * (i + 1));
        await uploadChunk(i, chunk);
      }

      // 所有切片上传完成后，可以发送合并请求或其他操作
      console.log('Upload completed', this.progress);
    },
    uploads() {
      if (!this.formValidate.video_link && !this.videoLink) {
        this.$message.error('您还没有上传视频！')
        return
      } else if (this.videoLink && !this.formValidate.video_link) {
        this.$message.error('请点击确认添加按钮！')
        return
      }
      nowEditor.dialog.close(true)
      nowEditor.editor.setContent("<video src='" + this.formValidate.video_link + "' controls='controls'></video>", true)
    }
  }
}
</script>

<style scoped>
    .iview-video-style{
        width: 40%;
        height: 180px;
        border-radius: 10px;
        background-color: #707070;
        margin-top: 10px;
        position: relative;
        overflow: hidden;
    }
    .iview-video-style .iconv{
        color: #fff;
        line-height: 180px;
        width: 50px;
        height: 50px;
        display: inherit;
        font-size: 26px;
        position: absolute;
        top: -74px;
        left: 50%;
        margin-left: -25px;
    }
    .iview-video-style .mark{
        position: absolute;
        width: 100%;
        height: 30px;
        top: 0;
        background-color: rgba(0,0,0,.5);
        text-align: center;
    }
  .mt50{
    margin-top: 50px;
  }
</style>
